
import { useState, useEffect, useRef } from "react";
// API
import API from "../API";

// Helpers
import { isPersistedState } from "../helpers";

const initialState = {
  page: 0,
  results: [],
  total_pages: 0,
  total_result: 0
}

export const useHomeFetch = () => {

  const [searchTerm, setSearchTerm] = useState('');
  const [state, setState] = useState(initialState);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(false);
  const [isLoadingMore, setIsLoadingMore] = useState(false);
  

  const fetchMovies = async (page, searchItem = "") => {
    try {
      setError(false);
      setLoading(true);

      const movies = await API.fetchMovies(searchItem, page);
      
      
      setState(prev => ({
        ...movies,
        results: 
          page > 1 ? [...prev.results, ...movies.results] : [...movies.results]
      }))
      console.log(movies);
      setLoading(false);
      setIsLoadingMore(false);

    } catch (error) {
      setError(true);
    }
  }

  // Initial and search
  useEffect(() => {
    if (!searchTerm) {
      const sessionState = isPersistedState('homeState');
      if (sessionState) {
        setState(sessionState);
        return;
      }
    }
    setState(initialState);
    fetchMovies(1, searchTerm);
  },[searchTerm]);

  // Load More
  useEffect(() => {
    if (!isLoadingMore) return;
    fetchMovies(state.page + 1, searchTerm);
  }, [isLoadingMore]);

  useEffect(() => {
    if (!searchTerm) {
      sessionStorage.setItem('homeState', JSON.stringify(state));
    }
  }, [searchTerm, state]);

  return { state, loading, error, searchTerm, setSearchTerm, setIsLoadingMore }
}